<!-- 老年人中药管理 -->
<template>
  <ElContainer style="height: 100%; width: 100%">
    <ElAside width="400px">
      <el-card :body-style="{ overflow: 'auto' }">
        <div style="height: calc(100vh - 120px)">
          <user-card v-model:user-data="qrScanInfo" type="gun" />
          <br />
          <ElCard :body-style="{ textAlign: 'center' }">
            <ElButton type="primary" @click="handleSave">
              <ElIcon>
                <CircleCheck />
              </ElIcon>
              保存
            </ElButton>
            <ElButton type="warning" @click="handleClear">
              <el-icon>
                <Refresh />
              </el-icon>
              清空
            </ElButton>
            <br />
            <br />
            <el-button
              type="warning"
              @click="handleSynchronous"
              loading-icon="Eleme"
              :loading="synchronousStatus"
              >同步
            </el-button>
            <LocalHistoryList
              :table="db.agedTcm"
              @edit-click="handleHistoryRowEdit"
            />
          </ElCard>
        </div>
      </el-card>
    </ElAside>
    <ElMain>
      <ElForm :inline="true" style="height: 100%">
        <ElTable :data="tableList" header-align="center" height="100%">
          <ElTableColumn
            label="最近一年的体检和感觉，回答一下问题"
            prop="label"
            width="400px"
            header-align="center"
          />
          <ElTableColumn
            label="没有(根本部/从来没有)"
            header-align="center"
            align="center"
          >
            <template #default="{ row }">
              <ElRadio v-model="formModel[row.field]" :label="1" value="1" />
            </template>
          </ElTableColumn>
          <ElTableColumn
            label="很少(有一点/偶尔)"
            header-align="center"
            align="center"
          >
            <template #default="{ row }">
              <ElRadio v-model="formModel[row.field]" :label="2" value="2" />
            </template>
          </ElTableColumn>
          <ElTableColumn
            label="有时(有些/少数时间)"
            header-align="center"
            align="center"
          >
            <template #default="{ row }">
              <ElRadio v-model="formModel[row.field]" :label="3" value="3" />
            </template>
          </ElTableColumn>
          <ElTableColumn
            label="经常(相当/多数时间)"
            header-align="center"
            align="center"
          >
            <template #default="{ row }">
              <ElRadio v-model="formModel[row.field]" :label="4" value="4" />
            </template>
          </ElTableColumn>

          <ElTableColumn
            label="总是(非常/每天)"
            header-align="center"
            align="center"
          >
            <template #default="{ row }">
              <ElRadio v-model="formModel[row.field]" :label="5" value="5" />
            </template>
          </ElTableColumn>
        </ElTable>
      </ElForm>
    </ElMain>
  </ElContainer>
</template>

<script lang="ts" setup>
// import CardScan from "@/components/CardScan/index.vue";
import UserCard from "@/components/UserCard/index.vue";
import { ITerminalB04_53 } from "@/model/IA00_04";
import * as modelUtils from "@/model/utils";
import { ref, toRaw } from "vue";
import agedTcm from "./agedTcm";
import dayjs from "dayjs";
import { ElMessage, ElNotification } from "element-plus";
import {asyncLocalRequest, db, DbService} from "@/db/db";
import { createQRCodeInfo, IQRCodeInfo } from "@/model/IQRCodeInfo";
import { asyncAgedTcm } from "@/api/asyncApi";
import LocalHistoryList from "@/components/LocalHistoryList/index.vue";
const dbService = new DbService(db.agedTcm)
const formModel = ref<Partial<ITerminalB04_53>>(
  modelUtils.createTerminalB04_53()
);
const qrScanInfo = ref<Partial<IQRCodeInfo>>(createQRCodeInfo());
const handleScanSuccess = (data) => {
  qrScanInfo.value = data;
};

const handleSave = async () => {
  try {
    console.log(qrScanInfo.value);
    if (!qrScanInfo.value?.idno) {
      ElNotification({
        title: "保存错误",
        message: "无人员信息，不能保存",
        type: "error",
      });
      return;
    }
    const saveData = toRaw(formModel.value);
    saveData.article = "中医体质";
    //关联健康档案号
    saveData.a00_03_03 = qrScanInfo.value.idno;
    const result:any = dbService.saveCard(saveData,toRaw(qrScanInfo.value));
    //置空
    qrScanInfo.value = createQRCodeInfo();
    formModel.value = {};
    ElMessage.success(result.message)
  } catch (error) {
    console.log(error);
  }
  console.log(toRaw(formModel.value));
};
const handleClear = () => {
  qrScanInfo.value = createQRCodeInfo();
  formModel.value = modelUtils.createB04_53();
};

const { tableList } = agedTcm(formModel);
const save = async () => {};
const handleHistoryRowEdit = (row: ITerminalB04_53) => {
  formModel.value = row;
  qrScanInfo.value = {
    id: row.qr_code_id,
    username: row.userName,
    sex: row.sex,
    idno: row.cardId,
  };
};

const synchronousStatus = ref(false);
const handleSynchronous = async () => {
  const data = await asyncLocalRequest(db.agedTcm);

  if (data.length) {
    const result: any = await asyncAgedTcm({
      data: data.map((item) => {
        item.data_id = item.id;
        delete item.id;
        return item;
      }),
    });
    ElMessage.closeAll();
    ElMessage.success("同步成功:" + result.successes.length + "条数据");
    if (result.successes.length) {
      result.successes.map(async (item) => {
        await db.agedTcm.update(item.data_id, { synchronous: 1 });
      });
    }
  }
};
defineExpose({ save });
</script>
<style scoped lang="scss">
table,
table tr th,
table tr td {
  border: 1px solid #0094ff;
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

.left {
  text-align: left;
}

.el-form--inline :deep(.el-form-item) {
  margin-right: 0px;

  .el-radio {
    margin-right: 10px;
  }

  .el-checkbox {
    margin-right: 10px;
  }
}
</style>
